<!--
 * @Author: wangding
 * @Date: 2020-11-04 14:19:51
 * @LastEditTime: 2021-05-25 09:35:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\inverter\pvModules.vue
-->
<template>
    <div class="pvmodules-big-main-box">
        <el-dialog
        :title="$t('device.inverter.js_pv_modules')"
        :visible="newVisiblePvModules"
        width="65%"
        style="min-width:1050px;"
        @close="()=>{$store.commit('setNewVisiblePvModules',false)}"
        :close-on-click-modal='false'
        >
        <div class="pvModules-mian-box">
            <el-row>
                <el-col :span="9">
                    <div>
                        <el-form ref="leftForm" :model="leftForm" label-width="230px" >
                            <el-row :gutter="20">
                                <el-col :span="23" :offset="0">
                                    <el-form-item :label="$t('device.inverter_pv_modules.manufacturer')" prop="ManufacturerID" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                        <!-- <el-input v-model="leftForm.ManufacturerName" placeholder="请输入内容"></el-input> -->
                                        <el-select v-model="leftForm.ManufacturerID" filterable :placeholder="$t('pleaseSelect')" @change='changeSLLName'>
                                            <el-option
                                            v-for="item in ManufacturerNameList"
                                            :key="item.manufacturerID"
                                            :label="item.name"
                                            :value="item.manufacturerID">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="23" :offset="0">
                                    <el-form-item :label="$t('device.inverter.js_pv_modules')" prop="ModuleID" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                        <el-select v-model="leftForm.ModuleID" filterable :placeholder="$t('pleaseSelect')" @change='changeName'>
                                            <el-option
                                            v-for="item in nameList"
                                            :key="item.moduleID"
                                            :label="item.name"
                                            :value="item.moduleID">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="22">
                                <el-col :span="23" :offset="0">
                                    <el-form-item :label="$t('device.inverter_pv_modules.powerRating')" prop="PModMPP" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                        <el-input v-model="leftForm.PModMPP" :placeholder="$t('pleaseInput')" :disabled="leftInputFlag"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="23" :offset="0">
                                    <el-form-item :label="$t('device.inverter_pv_modules.mpp_voltage')" prop="UModMPP" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                        <el-input v-model="leftForm.UModMPP" :placeholder="$t('pleaseInput')" :disabled="leftInputFlag"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="23" :offset="0">
                                    <el-form-item :label="$t('device.inverter_pv_modules.mpp_current')" prop="IModMPP" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                        <el-input v-model="leftForm.IModMPP" :placeholder="$t('pleaseInput')" :disabled="leftInputFlag"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="23" :offset="0">
                                    <el-form-item :label="$t('device.inverter_pv_modules.open_circuit_voltage')" prop="UMod0" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                        <el-input v-model="leftForm.UMod0" :placeholder="$t('pleaseInput')" :disabled="leftInputFlag"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="23" :offset="0">
                                    <el-form-item :label="$t('device.inverter_pv_modules.short_circuit_current')" prop="IModSC" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                        <el-input v-model="leftForm.IModSC" :placeholder="$t('pleaseInput')" :disabled="leftInputFlag"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="23" :offset="0">
                                    <el-form-item :label="$t('device.inverter_pv_modules.pv_modules_efficiency')" prop="EtaMod" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                        <el-input v-model="leftForm.EtaMod" :placeholder="$t('pleaseInput')" :disabled="leftInputFlag"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="15">
                    <div class="right-top-box">
                        <el-form ref="rightTopForm" :model="rightTopForm" label-width="420px" >
                            <el-row :gutter="20">
                                <el-col :span="24" :offset="0">
                                    <el-form-item :label="$t('device.inverter_pv_modules.chip_technology')" prop="MaterialID" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                        <!-- <el-input v-model="leftForm.ManufacturerName" placeholder="请输入内容"></el-input> -->
                                        <el-select v-model="rightTopForm.MaterialID" filterable :placeholder="$t('pleaseSelect')" :disabled="rightTopInputFlagSelect">
                                            <el-option
                                            v-for="item in allData"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="24" :offset="0">
                                    <el-form-item :label="$t('device.inverter_pv_modules.TempModU0rel')" prop="TempModU0rel" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                        <el-input v-model="rightTopForm.TempModU0rel" :placeholder="$t('pleaseInput')" :disabled="rightTopInputFlag"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="24" :offset="0">
                                    <el-form-item :label="$t('device.inverter_pv_modules.TempModU0')" prop="TempModU0" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                        <el-input v-model="rightTopForm.TempModU0" :placeholder="$t('pleaseInput')" :disabled="rightTopInputFlag"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                    <div class="right-bottom-box">
                        <el-form ref="rightBottomForm" :model="rightTopForm" label-width="120px" >
                            <div class="title-box-text">PV Array1</div>
                            <el-row :gutter="20">
                                <el-col :span="11" :offset="0">
                                    <el-form-item label="Strings" prop="PV1Strings" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                                        <el-input v-model="rightBottomForm.PV1String" :placeholder="$t('pleaseInput')" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="2" :offset="0">
                                    <div class="icon-style-box"><i class="el-icon-close"></i></div>
                                </el-col>
                                <el-col :span="11" :offset="0">
                                    <el-form-item :label="$t('PV Modules')" prop="PV1Num" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                                        <el-input v-model="rightBottomForm.PV1Num" :placeholder="$t('pleaseInput')" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="title-box-text">PV Array2</div>
                            <el-row :gutter="20">
                                <el-col :span="11" :offset="0">
                                    <el-form-item label="Strings" prop="PV2String" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                                        <el-input v-model="rightBottomForm.PV2String" :placeholder="$t('pleaseInput')" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="2" :offset="0">
                                    <div class="icon-style-box"><i class="el-icon-close"></i></div>
                                </el-col>
                                <el-col :span="11" :offset="0">
                                    <el-form-item :label="$t('PV Modules')" prop="PV2Num" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                                        <el-input v-model="rightBottomForm.PV2Num" :placeholder="$t('pleaseInput')" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="()=>{$store.commit('setNewVisiblePvModules',false)}">{{$t('cancel')}}</el-button>
            <el-button type="primary" @click='save'>{{$t('sure')}}</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        modulesRowData:{
            type:Object,
            default:()=>{return {}}
        }
    },
    data() {
        return {
            leftForm:{
                ManufacturerID:'',
                ModuleID:'',
                PModMPP:"",
                UModMPP:"",
                IModMPP:"",
                UMod0:"",
                IModSC:"",
                EtaMod:"",
            },
            rightTopForm:{
                MaterialID:'',
                TempModU0rel:'',
                TempModU0:'',
            },
            rightBottomForm:{
                PV1String:'',
                PV1Num:'',
                PV2String:'',
                PV2Num:'',
            },
            ManufacturerNameList:[],
            nameList:[],
            allData:[],
            leftInputFlag:true,
            rightTopInputFlag:true,
            rightTopInputFlagSelect:true,
        };
    },
    computed: {
        newVisiblePvModules(){
            return this.$store.state.sysStore.newVisiblePvModules
        },
    },
    watch: {
        modulesRowData:{
            handler(nv,ov){
                if(nv&&nv.wifiSN){
                    this.tModuleSelectModuleBySn()
                    this.getPVBySNAndModuleId()
                }
            },
            immediate:true
        }
    },
    created() {
        this.manufacturerSllManu()
        this.tMateriaAllData()
    },
    mounted() {

    },
    methods: {
        async tModuleSelectModuleBySn(){
            let res = await this.API.tModuleSelectModuleBySn({
                SN:this.modulesRowData.SN
            })
            if(res){
                this.leftForm.ManufacturerID = res.manufacturerID
                this.changeSLLName()
                this.leftForm.ModuleID = res.moduleID
                
                this.leftForm.PModMPP = res.pmodMPP
                this.leftForm.UModMPP = res.umodMPP
                this.leftForm.IModMPP = res.imodMPP
                this.leftForm.UMod0 = res.umod0
                this.leftForm.IModSC = res.imodSC
                this.leftForm.EtaMod = res.etaMod

                this.rightTopForm.MaterialID = res.materialID
                this.rightTopInputFlagSelect = true
                this.rightTopForm.TempModU0rel = res.tempModU0rel
                this.rightTopForm.TempModU0 = res.tempModU0

                this.rightBottomForm.PV1String = res.pv1String
                this.rightBottomForm.PV1Num = res.pv1Num
                this.rightBottomForm.PV2String = res.pv2String
                this.rightBottomForm.PV2Num = res.pv2Num
            }
        },
        async manufacturerSllManu(){
            let res = await this.API.manufacturerSllManu()
            this.ManufacturerNameList = res ||[]
        },
        changeSLLName(){
            this.nameList = []
            this.tModuleTModuleData()
            this.rightTopInputFlagSelect = false
        },
        async tModuleTModuleData(){
            let res = await this.API.tModuleTModuleData({
                ManufacturerID:this.leftForm.ManufacturerID
            })
            this.nameList = res ||[]
        },
        changeName(){
            this.getPVBySNAndModuleId()
            let data={}
            this.nameList.forEach(item =>{
                if(item.moduleID == this.leftForm.ModuleID){
                    data = item
                }
            })
            this.leftForm.PModMPP = data.pmodMPP
            this.leftForm.UModMPP = data.umodMPP
            this.leftForm.IModMPP = data.imodMPP
            this.leftForm.UMod0 = data.umod0
            this.leftForm.IModSC = data.imodSC
            this.leftForm.EtaMod = data.etaMod

            this.rightTopForm.MaterialID = data.materialID
            this.rightTopInputFlagSelect = true
            this.rightTopForm.TempModU0rel = data.tempModU0rel
            this.rightTopForm.TempModU0 = data.tempModU0

        },
        async tMateriaAllData(){
            let res = await this.API.tMateriaAllData()
            this.allData = res || []
        },
        async getPVBySNAndModuleId(){
            let res = await this.API.getPVBySNAndModuleId({
                SN:this.modulesRowData.SN,
                moduleId:this.leftForm.ModuleID
            })
            if(res.length>0){
                this.rightBottomForm.PV1String = res[0].pv1String
                this.rightBottomForm.PV1Num = res[0].pv1Num
                this.rightBottomForm.PV2String = res[0].pv2String
                this.rightBottomForm.PV2Num = res[0].pv2Num
			}
        },
        save(){
            this.$refs['leftForm'].validate((valid) => {
              if (valid) {
                    this.$refs['rightTopForm'].validate((valid) => {
                        if (valid) {
                            this.tModuleAddEntity()
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        async tModuleAddEntity(){
            let res = await this.API.tModuleAddEntity(Object.assign(
                {},
                this.leftForm,
                this.rightTopForm,
                this.rightBottomForm,
                {
                    ManufacturerName:this.returnSllName(),
                    Name:this.returnName(),
                    SN:this.modulesRowData.SN
                }
            ))
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.$emit('uploadData',true)
                this.$store.commit('setNewVisiblePvModules',false)
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        },
        returnSllName(){
            let name = ''
            for(let i = 0;i<this.ManufacturerNameList.length;i++){
                if(this.ManufacturerNameList[i].manufacturerID == this.leftForm.ManufacturerID){
                    return this.ManufacturerNameList[i].name
                }
            }
        },
        returnName(){
           let name = ''
            for(let i = 0;i<this.nameList.length;i++){
                if(this.nameList[i].moduleID == this.leftForm.ModuleID){
                    return this.nameList[i].name
                }
            } 
        }
    },
};
</script>

<style  lang="less" >
.pvmodules-big-main-box{
    .pvModules-mian-box{
        .right-top-box{
            border:2px dotted #ccc;
            border-radius: 5px;
            padding: 10px;
        }
        .right-bottom-box{
            border:2px dotted #ccc;
            border-radius: 5px;
            padding: 10px;
            margin-top:30px;
        }
        .title-box-text{
            font-weight: 900;
        }
        .icon-style-box{
            height: 32px;
            line-height: 32px;
            i{
                font-weight: 900;
                margin-left: 15px;
            }
        }
    }
    .el-dialog{
        min-width: 900px;
    }
}
</style>
